<template>
	<view class="barBox" v-if="dataArr">
        <view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
        <view class="commonHeader">人流量监控</view>
        <view class="charts-box" style="margin-top: 130rpx">
            <view class="chartTitle">
                入
                园
                人
                数
            </view>
            <view class="chartBg">{{dataArr.peopleIn}}人</view>
        </view>
        <view class="charts-box">
            <view class="chartTitle">
                出 园 人 数
            </view>
            <view class="chartBg chartBg2">{{dataArr.peopleOut}}人</view>
        </view>
        <view class="charts-box">
            <view class="chartTitle">
                在 园 人 数
            </view>
            <view class="chartBg chartBg3">{{dataArr.peopleInGarden}}人</view>
        </view>
	</view>
</template>

<script>
    import { $http } from '../../static/common/js/http.js'
    // 获取系统状态栏的高度
    let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
                dataArr: null,
                statusBarHeight: systemInfo.statusBarHeight
			}
		},
		computed: {
		},
        onLoad() {
        },
		onShow() {
		    this.getData()
		},
		created() {

		},
		methods: {
            getData(){
                const vm = this
                $http('/fenghuoImp/indexAct/app/traffic.html', 'post', {},
                    res => {
                        console.log(res,'9999')
                        vm.dataArr = res.data
                    },
                    err => {
                        console.log(err,'err')
                    }
                )
            },
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
    .barBox{
        /*padding-top: 130rpx;*/
        background: url("../../static/images/bg26.png") no-repeat;
        /* 以父元素的百分比来设置背景图像的宽度和高度。*/
        background-size: 100% 100%;
        height: 100%;
        min-height: 100vh;
    }
    .charts-box{
        height: 188rpx;
        padding-left: 188rpx;
        display: flex;
        align-items: center;
        margin-bottom: 80rpx;
        .chartTitle{
            width: 50rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #101010;
            line-height: 36rpx;
        }
        .chartBg{
            height: 188rpx;
            width: 188rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #1081FF;
            margin-left: 40rpx;
            background: url("../../static/images/bar1.png") no-repeat;
            /* 以父元素的百分比来设置背景图像的宽度和高度。*/
            background-size: 100% 100%;
        }
        .chartBg2{
            background-image: url("../../static/images/bar2.png");
            color: #37DDCB;
        }
        .chartBg3{
            background-image: url("../../static/images/bar3.png");
            color: #FFBE12;
        }
    }
</style>
